﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>统计图</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <!-- 引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <!-- FusionCharts 插件-->
    <script src="../../libs/FusionCharts/FusionCharts.js" type="text/javascript"></script>
    <script src="../../libs/FusionCharts/FusionChartsExportComponent.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
            font-size:14px;
            font-family:"微软雅黑";
        }
        #menu{
            width:100%;
            height:25px;         
            padding:5px 10px;
            left:10px;    
        }        
        #map{
            width:100%;
            height:570px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <label>统计图类型：&nbsp;</label>
          <select id="type">
            <option value="Column2D">2D柱状图</option>
            <option value="Column3D" selected="selected">3D柱状图</option>
            <option value="Line">折线图</option>
            <option value="Area2D">区域折线图</option>
            <option value="Pie2D">2D饼图</option>
            <option value="Pie3D">3D饼图</option>
          </select>
        <button id="showCharts" class="btn" title="">加载统计图</button>
       
    </div> 
    <div id="map" >
    </div>
    <script type="text/javascript">
        //矢量数据源
        var vectSource = new ol.source.Vector({
        });
        //矢量图层
        var vectLayer = new ol.layer.Vector({
            source: vectSource
        });
        
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vectLayer //矢量要素图层
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: [12733048, 3571638], //地图初始中心点
                minZoom: 2,
                zoom: 14
            })
        });

        /**
        * 通过后台查询矢量要素
        */
        function selectRegData() {
            var opType = "select";  //查询数据
            var tableName = "ChartInfo";  //数据表名称
            $.ajax({
                url: '../RegDataHandler.ashx', //请求地址
                type: 'POST',  //请求方式为post
                data: { 'type': opType, 'table': tableName }, //传入参数 
                dataType: 'json', //返回数据格式
                //请求成功完成后要执行的方法  
                success: showRegCallBack,
                error: function (err) {
                    alert("执行失败");
                }
            });
        }

        /**
        * 查询请求回调函数
        * @param {json} data 查询返回的数据
        */
        function showRegCallBack(data) {
            vectSource.clear(); //清空矢量图层数据源
            var resultData = data.obj; //查询结果json数组
            $.each(resultData, function (i, item) {
                //解析结果集中的几何字符串，并转换为多边形的几何数组
                var polyCoords = item.geometry.split(";");
                var coordinates = new Array();
                coordinates[0] = new Array();
                for (var i = 0; i < polyCoords.length; i++) {
                    coordinates[0][i] = polyCoords[i].split(",");
                }
                //创建一个新的要素，并添加到数据源中
                var feature = new ol.Feature({
                    geometry: new ol.geom.Polygon(coordinates),
                    name: item.name,
                    id: item.ID
                });
                vectSource.addFeature(feature);

                //得到feature的外包矩形中心点
                var fGeometry = feature.getGeometry();
                var fExtent = fGeometry.getExtent();
                var centerX = fExtent[0] + (fExtent[2] - fExtent[0]) / 2;
                var centerY = fExtent[1] + (fExtent[3] - fExtent[1]) / 2;
                var center = [centerX, centerY]; //外包矩形中心点
                //为每个区域要素加载统计图
                addCharts(item, center);
            });
        }

        var mapContainer = document.getElementById('map'); //地图容器对象
        var typeSelect = document.getElementById('type'); //统计图类型对象

        /**
        * 根据数据库中的数据加载统计图
        * @param {json} itemData 查询返回的每条记录数据
        * @param {ol.coordinate} coordinate 要素的几何外包矩形中心点
        */
        function addCharts(itemData,coordinate) {
            //新增div元素，用来承载统计图
            var elementDiv = document.createElement('div');
            elementDiv.id = "chart"+itemData.ID;
            elementDiv.className = "chart";
            mapContainer.appendChild(elementDiv); // 为mapContainer添加div子节点
            //创建一个Overlay控件
            var newOverLayer = new ol.Overlay({
                element: elementDiv,
                positioning: 'bottom-center'
            });
            newOverLayer.setPosition(coordinate);
            map.addOverlay(newOverLayer);
            //统计图类型
            var chartType = typeSelect.value;
            //拼接统计图内容字符串
            var caption = itemData.name+"近三年本科招生人数"; //主标题
            var result = "";
            result += "<graph caption='" + caption + "' baseFontSize='12' baseFont='微软雅黑'  showNames='1' decimalPrecision='0' formatNumberScale='0' bgColor='#EEEEEE'  bgAlpha='50'>";
            result += "<set name='2013年' value='" + itemData.year13 + "'/>";
            result += "<set name='2014年' value='" + itemData.year14 + "'/>";
            result += "<set name='2015年' value='" + itemData.year15 + "'/>";
            result += "</graph>";
            // 创建统计图控件        
            var chart = new FusionCharts("../../libs/FusionCharts/" + chartType + ".swf", "myChartId" + itemData.ID, "300", "250", "0", "1");            
            chart.setDataXML(result); //设置统计图数据
            chart.setTransparent(true); //开启透明设置
            chart.render(elementDiv.id);//在目标ID容器内渲染统计图　
        }

        /**
        * 【加载统计图】功能按钮处理函数
        */
        document.getElementById('showCharts').onclick = function () {
            var overLayers = map.getOverlays(); //获取map中所有Overlays图层
            overLayers.clear(); //移除所有Overlays图层
            selectRegData(); //通过后台查询矢量要素显示并加载统计图            
        };

    </script>
</body>
</html>
